<template>
	<div class="content">
			<div class="title">
				我的预约
				<a href="javascript:;" class="back" @click="go"></a>
			</div>
				<ul class="ul">
					<li class="li">
						<div class="top">
							<div class="g_fl">
								<h3 class="h3">陕西省中医医院</h3>
								<p class="p">心病科&nbsp;&nbsp;刘超峰</p>
							</div>
							<span class="g_fr">18元</span>
						</div>
						<div class="action">
							<div class="g_fl">
								<p class="p">就诊时间：2018-02-05</p>
								<p class="p">就诊人：苟卓</p>
							</div>
							<div class="g_fr">
								已取消
							</div>
						</div>
					</li>
					<li class="li">
						<div class="top">
							<div class="g_fl">
								<h3 class="h3">陕西省中医医院</h3>
								<p class="p">心病科&nbsp;&nbsp;刘超峰</p>
							</div>
							<span class="g_fr">18元</span>
						</div>
						<div class="action">
							<div class="g_fl">
								<p class="p">就诊时间：2018-02-05</p>
								<p class="p">就诊人：苟卓</p>
							</div>
							<div class="g_fr">
								<span class="span">购买保险</span>
								<span class="span">补发短信</span>
							</div>
						</div>
					</li>
				</ul>
		</div>
</template>

<script>
	export default {
	  name: 'My',
	  methods:{
	  	go:function(){
	  		this.$router.push(`/My`);
	  	}
	  }
	}
</script>

<style scoped>
	.content {
  background: #f2f2f2;
  height: 100%; }
  .content .title {
    text-align: center;
    height: 0.44rem;
    line-height: 0.44rem;
    padding: 0 0.15rem;
    font-size: 0.17rem;
    background: #fff;
    border-bottom: 1px solid #ebecf1;
    position: relative; }
    .content .title .back {
      background: url(/static/img/find/back.png) no-repeat;
      background-size: 100%;
      position: absolute;
      display: block;
      width: 0.2rem;
      height: 0.2rem;
      left: 0.15rem;
      top: 0.14rem; }
  .content .ul .li {
    margin-top: 0.06rem;
    overflow: hidden;
    background: #fff;
    padding: 0.07rem; }
    .content .ul .li .top {
      overflow: hidden;
      border-bottom: 1px solid #eee;
      padding-bottom: 0.12rem; }
      .content .ul .li .top .g_fl {
        float: left; }
        .content .ul .li .top .g_fl .h3 {
          color: #28354c;
          font-size: 0.14rem; }
        .content .ul .li .top .g_fl .p {
          color: #83889a;
          font-size: 0.1rem; }
      .content .ul .li .top .g_fr {
        float: right; }
    .content .ul .li .action {
      overflow: hidden;
      padding-top: 0.12rem; }
      .content .ul .li .action .g_fl {
        float: left; }
        .content .ul .li .action .g_fl .p {
          color: #a6a8b6;
          font-size: 0.1rem; }
      .content .ul .li .action .g_fr {
        float: right;
        color: #a6a8b6;
        font-size: 0.1rem; }
        .content .ul .li .action .g_fr .span {
          display: inline-block;
          border: 1px solid #2f7fe2;
          color: #3278ee;
          height: 0.28rem;
          line-height: 0.14rem;
          width: 0.7rem;
          text-align: center;
          border-radius: 3px;
          line-height: 0.28rem; }

</style>